<template>
<el-menu
    active-text-color="#409eff"
    background-color="#304156"
    class="el-menu-vertical-demo"
    :default-active="activeIndex"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    unique-opened
    router
  >
  <el-menu-item index="/index">
          <i class="iconfont homepage"></i>
          <span>首页</span>
        </el-menu-item>
    <el-sub-menu  :index="`/${item.name}`" v-for="item in userStore.activemenus" :key="item.id">
      <template #title>
        <i class="iconfont" :class="item.icon"></i>
        <span>{{item.title}}</span>
      </template>
      <el-menu-item :index="`/${item.name}/${sub.name}`" v-for="sub in item.children" :key="sub.id">
        <i class="iconfont" :class="sub.icon"></i>
        <span>{{sub.title}}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const userStore = useUserStore()
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key,keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key,keyPath);
}

let activeIndex = ref("/index");
const route = useRoute()
onMounted(() => {
  activeIndex.value = route.path;
})
</script>

<style lang="less" scoped>
  .el-menu-item{
    background: linear-gradient(90deg, #F97794, #cc5323 );
  }
  .is-active{
    color: rgb(46, 31, 215);
  }
</style>